//导入两大主题
@import "./themes.scss";
 
 
//遍历主题map
@mixin themeify {
    @each $theme-name, $theme-map in $themes {
      //!global 把局部变量强升为全局变量
      $theme-map: $theme-map !global;
      //判断html的data-theme的属性值  #{}是sass的插值表达式
      //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
      // @if $theme-name == default {
      //   & {
      //     @content;
      //   }
      // } @else {
        [data-theme="#{$theme-name}"] & {
          @content;
        }
      // }
    }
  }
@function themed($key) {
    @return map-get($theme-map, $key);
}
 
// @import "./common.scss";
.bg{
 
  @include themeify{

      background-color:themed("background-color") !important;
      color:themed("color") !important;

  }

}
.bd{
 
  @include themeify{

      background-color:themed("background-color") !important;
      // color:themed("color") !important;

  }

}